<template>
  <j-modal
    switchFullscreen
    :title='title'
    :width='1200'
    :visible='visible'
    :confirmLoading='confirmLoading'
    @cancel='handleCancel'
    destroyOnClose
    :footer='null'>

    <a-spin :spinning='confirmLoading'>

      <a-table
        ref='table'
        size='middle'
        bordered
        :scroll="{
          x:'max-content'
        }"
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        @change='handleTableChange'>

        <!--                <div slot="filterDropdown">-->
        <!--                    <a-card>-->
        <!--                        <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">-->
        <!--                            <a-row>-->
        <!--                                <template v-for="(item,index) in defColumns">-->
        <!--                                    <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">-->
        <!--                                        <a-col :span="12">-->
        <!--                                            <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>-->
        <!--                                        </a-col>-->
        <!--                                    </template>-->
        <!--                                </template>-->
        <!--                            </a-row>-->
        <!--                        </a-checkbox-group>-->
        <!--                    </a-card>-->
        <!--                </div>-->
        <a-icon slot='filterIcon' type='setting' :style="{ fontSize:'16px',color:  '#108ee9' }" />

        <template slot='imgUrl' slot-scope='text, record, index'>
          <div class='anty-img-wrap'>
            <a-avatar shape='square' :src='record.imgUrl' icon='user' />
          </div>
        </template>
        <div slot='isActiveStatus' slot-scope='text,recode'>
          {{ text|isActiveStatus }}
        </div>
        <div slot='filterTerminalType' slot-scope='text,recode'>
          {{ text|filterTerminalType }}
        </div>
        <!--                <template slot="action" slot-scope="text, record">-->
        <!--                    <a @click="handleEdit(record)">编辑</a>-->

        <!--                    <a-divider type="vertical"/>-->
        <!--                    <a-dropdown>-->
        <!--                        <a class="ant-dropdown-link">更多-->
        <!--                            <a-icon type="down"/>-->
        <!--                        </a>-->
        <!--                        <a-menu slot="overlay">-->
        <!--                            <a-menu-item>-->
        <!--                                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
        <!--                                    <a>删除</a>-->
        <!--                                </a-popconfirm>-->
        <!--                            </a-menu-item>-->
        <!--                        </a-menu>-->
        <!--                    </a-dropdown>-->
        <!--                </template>-->

      </a-table>

    </a-spin>
    <div style='text-align: right;margin-top:20px'>
      <a-button type='primary' @click='close'>关闭</a-button>
    </div>
  </j-modal>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { httpAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import { isMobile } from '@/utils/validate'
import UploadImage from '@/components/upload-image/UploadImage'
import { isNil } from 'lodash'

export default {
  name: 'stock-modal',
  mixins: [PageListMixin],
  data() {
    return {
      areaLinkage: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        telephone: {
          rules: [
            { required: true, message: '', trigger: 'submit' },
            {
              validator: function(rule, value, callback) {
                if (!isMobile(value)) {
                  callback(new Error(''))
                }
                callback()
              }
            }
          ]
        }
      },
      url: {
        list: window._CONFIG['domianOrderURL'] + '/dmsProductStockTerController/getPageList'
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          fixed: 'left',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },

        {
          title: '商品图片',
          align: 'center',
          dataIndex: 'imgUrl',
          width: 80,
          fixed: 'left',
          ellipsis: true,
          scopedSlots: { customRender: 'imgUrl' }
        },
        {
          title: '商品名称',
          align: 'center',
          width: 120,
          ellipsis: true,
          dataIndex: 'productName'
        },
        {
          title: '商品条码',
          align: 'center',
          width: 120,
          ellipsis: true,
          dataIndex: 'barcode'
        },
        {
          title: '库存',
          align: 'center',
          width: 80,
          ellipsis: true,
          dataIndex: 'stockNum'
        },
        {
          title: '单位',
          align: 'center',
          width: 80,
          ellipsis: true,
          dataIndex: 'saleUnit'
        },
        {
          title: '规格',
          align: 'center',
          width: 80,
          ellipsis: true,
          dataIndex: 'specifications'
        }
        //
        // {
        //     title: '状态',
        //     align: 'center',
        //     dataIndex: 'status',
        //     width: 80,
        //     ellipsis: true,
        //     scopedSlots: {customRender: 'status'},
        // },
        // {
        //     title: '商品名称',
        //     align: 'center',
        //     width: 120,
        //     ellipsis: true,
        //     dataIndex: 'productName',
        // },
        // {
        //     title: '商品条码',
        //     align: 'center',
        //     width: 120,
        //     ellipsis: true,
        //     dataIndex: 'barcode',
        // },
        // {
        //     title: '商品价格',
        //     align: 'center',
        //     width: 120,
        //     ellipsis: true,
        //     dataIndex: 'defaultPrice',
        // },
        //
        // {
        //     title: '品类',
        //     align: 'center',
        //     width: 80,
        //     ellipsis: true,
        //     dataIndex: 'typeCodeDesc',
        // },
        // {
        //     title: '是否上架',
        //     align: 'center',
        //     width: 80,
        //     ellipsis: true,
        //     dataIndex: 'shelfStatus',
        // },
        // {
        //     title: '开始时间',
        //     align: 'center',
        //     width: 120,
        //     ellipsis: true,
        //     dataIndex: 'beginDate',
        // },
        // {
        //     title: '结束时间',
        //     align: 'center',
        //     width: 120,
        //     ellipsis: true,
        //     dataIndex: 'endDate',
        // },
        // {
        //     title: '创建时间',
        //     align: 'center',
        //     width: 120,
        //     ellipsis: true,
        //     dataIndex: 'createdDate',
        // },
        // {
        //     title: '更新时间',
        //     align: 'center',
        //     width: 120,
        //     ellipsis: true,
        //     dataIndex: 'updateDateTime',
        // }
      ],
      queryParam: {
        terminalCode: ''
      }
    }
  },
  components: { JTreeSelect, JAreaLinkage, UploadImage },
  created() {
  },
  watch: {
    visible(v) {
      if (v) {
        this.queryParam.terminalCode = this.model.terminalCode
        this.loadData(1)
      }
    }
  },
  methods: {
    randomHexColor() { //随机生成十六进制颜色
      var hex = Math.floor(Math.random() * 16777216).toString(16) //生成ffffff以内16进制数
      while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
        hex = '0' + hex
      }
      return '#' + hex //返回‘#'开头16进制颜色
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let method = ''
          if (!this.model.id) {
            method = 'post'
          } else {
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          // formData.punchTime = formData.punchTime ? formData.punchTime.format('YYYY-MM-DD HH:mm:ss') : null;
          // formData.birthday = formData.birthday ? formData.birthday.format() : null;

          // console.log(formData)
          httpAction(this.addOrUpdateUrl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            //that.close();
          })


        }
      })
    },
    handleCancel() {
      this.close()
    }


  }
}
</script>

<style scoped>

</style>
